<template>
  <div class="gift_code_manager">
    <el-container class="base_details_container">
      <BackTitleView title="礼包码管理" />
      <el-main>
        <div class="base_details_content">
          <div class="base_screen_header" style="margin-top: 15px;">
            <div>
              <el-button @click="add" type="primary">生成礼包码</el-button>
              <el-button style="margin-left: 20px;" @click="importCode" type="primary">导入礼包码</el-button>
            </div>
          </div>
          <StatusBar :data="statusList" default="all" />
          <div class="base_main_header">
            <el-button type="primary" text @click="getExport">导出</el-button>
          </div>
          <DataCollectTable :data="data" :total="total" :config="config">
          </DataCollectTable>
        </div>
      </el-main>
      <el-footer>
        <el-button @click="route.go(-1)">关闭</el-button>
      </el-footer>
    </el-container>
    <el-dialog v-model="dialogVisible" title="生成礼包码" width="35%" top="35vh" class="base_dialog">
      <el-form ref="giftCodeFormRef" :model="giftCodeForm" :rules="giftCodeFormRules" label-width="100px">
        <el-form-item label="生成数量" prop="num">
          <el-input v-model.number="giftCodeForm.num" type="number" placeholder="请输入" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" />
        </el-form-item>
        <el-form-item label="发放人员" prop="salesman">
          <el-select v-model="giftCodeForm.salesman" placeholder="请选择" filterable>
            <el-option v-for="(item, index) in accountOptions" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submitGiftCodeForm">保存</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import StatusBar from "@com/StatusBar.vue";
import DataCollectTable from "@com/table/DataCollectTable.vue";
import { $msg, $box } from "@ui/msg";
import { ref, reactive } from "vue";
import api from "@api/giftCode"
import $ from "@util/base"
import useRoute from "@util/router";

const route = useRoute();

route.watchRouter("giftcodemanager", () => { getData() })

// 1013001 未核销、1013002 已核销
const statusList = reactive([
  {
    label: "全部",
    value: "all",
    total: 0,
  },
  {
    label: "未核销",
    value: "1013001",
    total: 0,
  },
  {
    label: "已核销",
    value: "1013002",
    total: 0,
  }
]);

const config = {
  showIndex: false,
  column: [
    {
      label: "编号",
      prop: "itemCode",
    },
    {
      label: "礼包码",
      prop: "giftExchangeCode",
    },
    {
      label: "发放人员",
      prop: "salesman"
    },
    {
      label: "状态",
      prop: "giftStatusVal",
      width: 100,
    },
    {
      label: "核销人",
      prop: "exchangeBy",
      width: 120,
    },
    {
      label: "核销时间",
      prop: "exchangeTime",
      width: 150,
    },
    {
      label: "操作人",
      prop: "creator",
      width: 120,
    },
    {
      label: "生成时间",
      prop: "createTime",
      width: 150,
    }
  ],
};

getNum();
function getNum() {
  api.num(route.query().code, (val) => {
    numData(val);
  });
}

function numData(val) {
  statusList.forEach((e, i) => {
    e.total = val[i];
  });
}

const total = ref(0)
const data = ref([])

getData()
function getData() {
  let routeQuery = route.query()
  let params = {
    giftCode: routeQuery.code,
    status: routeQuery.status,
    page: routeQuery.p,
    size: routeQuery.s
  }
  api.list(params, val => {
    total.value = val.total
    data.value = val.list.map(e => {
      switch (e.giftExchangeStatus) {
        case "1013001":
          e.giftStatusVal = "未核销"
          break
        case "1013002":
          e.giftStatusVal = "已核销"
          break
      }
      return e
    })
  })
}

const dialogVisible = ref(false)
const giftCodeFormRef = ref(null)

const accountOptions = ref([])

getConfig()

function getConfig() {
  api.account(val => {
    accountOptions.value = val
  })
}

const giftCodeForm = ref({
  num: null,
  salesman: null
})
const giftCodeFormRules = {
  num: [{
    required: true,
    message: '请输入生成数量',
    trigger: 'blur',
  }, {
    type: "number",
    min: 1,
    max: 100,
    message: '每次发放范围在1到100个',
    trigger: 'blur'
  }],
  salesman: [{
    required: true,
    message: '请选择发放人员',
    trigger: 'change',
  }]
}

function add() {
  if (giftCodeFormRef.value) {
    giftCodeFormRef.value.resetFields()
  }
  dialogVisible.value = true
}

function importCode() {
  route.push({ name: 'importGiftCode', query: { code: route.query().code } })
}

function submitGiftCodeForm() {
  giftCodeFormRef.value.validate((valid) => {
    if (valid) {
      api.add(route.query().code, giftCodeForm.value, () => {
        $msg.succ("生成礼包码成功");
        dialogVisible.value = false
        getNum()
        getData()
      })
    }
  })
}

function getExport() {
  let routeQuery = route.query()
  api.export({
    giftCode: routeQuery.code,
    status: routeQuery.status,
  }, val => {
    $.download(val.url, "礼包码导出")
  })
}
</script>

<style lang="scss" scoped>
.gift_code_manager {
  height: 100%;

  .base_details_content {
    padding: 0 20px;
  }
}
</style>